﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Resource/JS/jquery-1.10.2.js"></script>
    <script src="../Resource/JS/angular.1.2.0.min.js"></script>
</head>
<body ng-app="tab">

    <div ng-controller="tab_c">
        <input type="button" value="Show" ng-click="show();" />
        <input type="button" value="Change" ng-click="change();" />

        <div id="divContainer">
        </div>
    </div>
</body>
</html>
<script>
    var app = angular.module("tab", []);

    app.controller("tab_c", function ($scope, $compile, $element, $rootScope) {

        $scope.obj = { age: 1 };

        $rootScope.num = 1;
        $scope.show = function () {
            $scope.obj.age = $scope.obj.age + 1;
            var keyEl = angular.element("<div ng-click='test()'>{{obj.age}}</div>");
            $element.find("div[id=divContainer]").append(keyEl);
            $compile(keyEl)($scope);
        }
        $scope.change = function () {
            $scope.obj.age = 100;
        }
        $scope.test = function () {
            alert(1);
        }
    });

    var domEl = "<input type='text' value={{value.age}} style='width: 200px'></input>";
    app.directive("myInput", function () {
        var temp = {
            scope: {
                value: "=",
            },
            restrict: "E",
            template: domEl,
            controller: function ($scope, $element) {
                var s = $scope.value;
            }
        };
        return temp;
    })
</script>
